<template>
    <div class="app">
        <Head />
        {{count}} {{fullName}}
        <!-- fade-enter-active fade-leave-active -->
        <!-- fade-enter fade-leave-to -->
        <transition name="fade">
          <router-view></router-view>
        </transition>
        <home/>
        <!-- 加name属性，在routes中配置组件的名字 -->
        <!-- <router-view name="a"></router-view> -->
    </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
import Home from './components/home/home.vue'
import Head from './components/header/header.jsx'
// import Todo from './views/todo/todo.vue'

export default {
  name: 'App',
  components: {
    Home,
    Head
    // Todo
  },
  data () {
    return {
      a: 1111111
    }
  },
  mounted () {
    // app中动态加载的模块
    console.log('moduleA:' + this.textA)

    Promise.resolve().finally(() => {
      console.log(666667)
      console.log(this.$parent.$options.name)
    })
    // let i = 0
    // setInterval(() => {
    //   this.$store.commit('updateCount', i++)
    // }, 1000)
    // this.$store.dispatch('updateCountAsync', {
    //   number: 10,
    //   time: 2000
    // })
    // setInterval(() => {
    //   this.updateCount(i++)
    // }, 1000)
    this.updateCountAsync({
      number: 10,
      time: 2000
    })
  },
  methods: {
    ...mapActions(['updateCountAsync']),
    ...mapMutations(['updateCount'])
  },
  computed: {
    // ...mapState(['count', 'a/text']),
    ...mapState({
      count: 'count', // 重新命名
      textA: state => state.a.text
    }),
    // ...mapState({
    //   counter: state => state.count // 可以操作数据
    // }),
    // count () {
    //   return this.$store.state.count
    // },
    ...mapGetters(['fullName'])
    // fullName () {
    //   return this.$store.getters.fullName
    // }
  }
}
</script>

<style scoped>
/* .app {
    background: url(./assets/1.png);
} */
.text {
  text-decoration: underline;

  color: red;
}

</style>


